<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="行高">
                <el-input v-model="propJson.spanStyleLineHeight" style="width: 100%" placeholder="行高" />
            </el-form-item>

            <el-form-item label="字体大小">
                <el-input v-model="propJson.spanStyleFontSize" style="width: 100%" placeholder="字体大小" />
            </el-form-item>

            <el-form-item label="字体类型">
                <el-select v-model="propJson.spanStyleFontFamily" placeholder="字体类型" style="width: 100%">
                    <el-option label="微软雅黑" value="Microsoft YaHei" />
                    <el-option label="微软正黑体" value="Microsoft JhengHei" />
                    <el-option label="宋体" value="SimSun" />
                    <el-option label="楷体" value="KaiTi" />
                    <el-option label="仿宋" value="FangSong" />
                    <el-option label="隶书" value="LiSu" />
                    <el-option label="黑体" value="SimHei" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否垂直居中">
                <el-radio-group v-model="propJson.spanStyleAlignCenter">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否水平居中">
                <el-radio-group v-model="propJson.spanStyleJustifyCenter">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="字体颜色">
                <el-color-picker v-model="propJson.spanStyleFontColor" show-alpha />
            </el-form-item>

            <el-form-item label="是否循环">
                <el-radio-group v-model="propJson.isForEach">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否分行" v-if="propJson.isForEach">
                <el-radio-group v-model="propJson.isBlock">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否开启点击复制">
                <el-radio-group v-model="propJson.isClickCopy">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否触发点击事件">
                <el-radio-group v-model="propJson.isClickAction">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="点击事件类型" v-if="propJson.isClickAction">
                <el-radio-group v-model="propJson.clickActionType">
                    <el-radio label="routeTo">跳转路由</el-radio>
                    <el-radio label="action">触发事件</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isClickAction && propJson.clickActionType === 'action'">设置触发事件</el-divider>
            <CommonThirdServiceValue v-if="propJson.isClickAction && propJson.clickActionType === 'action'"
                                     :actionInfo="propJson.clickActionInfo && propJson.clickActionInfo.actionList ? propJson.clickActionInfo.actionList : {}"
                                     :commonParam="commonParam" />

            <CommonClickAction v-if="propJson.isClickAction && propJson.clickActionType === 'routeTo'"
                            :routeToInfo="propJson.clickActionInfo && propJson.clickActionInfo.routeToInfo ? propJson.clickActionInfo.routeToInfo : {}"/>

            <el-divider>文本内容</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.actionInfo ? propJson.actionInfo : {}" :commonParam="commonParam" />
        </el-form>
    </div>
</template>

<script>
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue";
import CommonClickAction from "@/components/lowcode/service/CommonClickAction"

export default {
    name: "SpanDrawer",
    props: ['commonParam'],
    components: {
        CommonThirdServiceValue,
        CommonClickAction
    },
    data() {
        return {

        }
    },
    methods: {
    },
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    }
}
</script>

<style scoped lang="less">
.drawerContainer {
    width: 100%;
}
</style>